<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>企业端招聘管理平台</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/antd/dist/antd.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f7fa;
            margin: 0;
            padding: 0;
        }
        .container {
            margin: 20px auto;
            max-width: 1200px;
        }
        .module-title {
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 20px;
            color: #333;
        }
        .module-content {
            background-color: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            margin-bottom: 40px;
        }
        .card {
            border: 1px solid #ddd;
            padding: 20px;
            margin: 10px 0;
            border-radius: 8px;
        }
        .table-container {
            margin-bottom: 20px;
        }
        .ant-input, .ant-btn, .ant-table {
            width: 100%;
            margin: 10px 0;
        }
        .btn-submit {
            margin-top: 10px;
        }
        .ant-btn-primary {
            background-color: #4CAF50;
            border-color: #4CAF50;
        }
        .ant-btn-primary:hover {
            background-color: #45a049;
            border-color: #45a049;
        }
        .ant-btn-dashed {
            border-color: #f0f0f0;
        }
        table {
            width: 100%;
            margin-top: 20px;
            border-collapse: collapse;
        }
        table, th, td {
            border: 1px solid #ddd;
            text-align: center;
        }
        th, td {
            padding: 10px;
        }
        .card-actions {
            display: flex;
            justify-content: flex-end;
        }
        .card-actions .ant-btn {
            margin-left: 10px;
        }
    </style>
</head>
<body>
    <div class="container">

        <!-- 职位发布与管理模块 -->
        <div class="module-title">职位发布与管理</div>
        <div class="module-content card">
            <form id="jobForm" action="#" onsubmit="handleJobSubmit(event)">
                <label for="jobTitle">职位名称:</label>
                <input type="text" id="jobTitle" name="jobTitle" class="ant-input" placeholder="输入职位名称" required><br><br>
                <label for="jobDescription">职位描述:</label><br>
                <textarea id="jobDescription" name="jobDescription" class="ant-input" rows="4" placeholder="输入职位描述" required></textarea><br><br>
                <label for="salary">薪资范围:</label>
                <input type="text" id="salary" name="salary" class="ant-input" placeholder="薪资范围"><br><br>
                <label for="location">工作地点:</label>
                <input type="text" id="location" name="location" class="ant-input" placeholder="输入工作地点"><br><br>
                <button type="submit" class="ant-btn ant-btn-primary btn-submit">发布职位</button>
            </form>
        </div>

        <!-- 简历筛选与候选人管理模块 -->
        <div class="module-title">简历筛选与候选人管理</div>
        <div class="module-content card">
            <div class="table-container">
                <table class="ant-table" id="candidateTable">
                    <thead>
                        <tr>
                            <th>姓名</th>
                            <th>简历</th>
                            <th>技能评估</th>
                            <th>面试状态</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <!-- 示例数据 -->
                        <tr>
                            <td>张三</td>
                            <td><a href="#">查看简历</a></td>
                            <td>JavaScript, React</td>
                            <td>面试中</td>
                            <td>
                                <button class="ant-btn ant-btn-primary" onclick="scheduleInterview('张三')">安排面试</button>
                            </td>
                        </tr>
                        <tr>
                            <td>李四</td>
                            <td><a href="#">查看简历</a></td>
                            <td>Python, Django</td>
                            <td>已拒绝</td>
                            <td>
                                <button class="ant-btn ant-btn-dashed" onclick="removeCandidate('李四')">移除</button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <!-- 智能推荐与人才匹配模块 -->
        <div class="module-title">智能推荐与人才匹配</div>
        <div class="module-content card">
            <div class="table-container">
                <table class="ant-table">
                    <thead>
                        <tr>
                            <th>候选人姓名</th>
                            <th>匹配度</th>
                            <th>技能</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>张三</td>
                            <td>95%</td>
                            <td>React, Node.js</td>
                            <td>
                                <button class="ant-btn ant-btn-primary">查看匹配分析</button>
                            </td>
                        </tr>
                        <tr>
                            <td>王五</td>
                            <td>88%</td>
                            <td>Java, Spring</td>
                            <td>
                                <button class="ant-btn ant-btn-primary">查看匹配分析</button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <!-- 面试安排与AI面试集成模块 -->
        <div class="module-title">面试安排与AI面试</div>
        <div class="module-content card">
            <label for="interviewDate">选择面试日期:</label>
            <input type="date" id="interviewDate" name="interviewDate" class="ant-input" required><br><br>
            <button type="button" class="ant-btn ant-btn-primary">安排面试</button>
            <div style="margin-top: 20px;">
                <h4>面试结果</h4>
                <table class="ant-table">
                    <thead>
                        <tr>
                            <th>候选人姓名</th>
                            <th>技术评分</th>
                            <th>沟通能力</th>
                            <th>总评分</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>张三</td>
                            <td>90</td>
                            <td>85</td>
                            <td>88</td>
                        </tr>
                        <tr>
                            <td>李四</td>
                            <td>78</td>
                            <td>82</td>
                            <td>80</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

    </div>

    <script src="https://cdn.jsdelivr.net/npm/antd/dist/antd.min.js"></script>
    <script>
        // 处理职位发布表单提交
        function handleJobSubmit(event) {
            event.preventDefault();
            const jobTitle = document.getElementById('jobTitle').value;
            const jobDescription = document.getElementById('jobDescription').value;
            const salary = document.getElementById('salary').value;
            const location = document.getElementById('location').value;
            console.log(`职位名称: ${jobTitle}, 描述: ${jobDescription}, 薪资: ${salary}, 地点: ${location}`);
            alert('职位发布成功！');
        }

        // 面试安排
        function scheduleInterview(candidateName) {
            alert(`已安排面试: ${candidateName}`);
        }

        // 移除候选人
        function removeCandidate(candidateName) {
            alert(`已移除候选人: ${candidateName}`);
        }
    </script>
</body>
</html>
